<template>
  <div>
    <page-banner v-if="showBanner && bannerPosition==='top'" ref="pageBanner" :banner-setting="bannerSetting" />
    <table-filter
      ref="tableFilter"
      is-in-template
      :query="filter"
      :query-rows="queryRows"
      :enable-full-search="fullTextSearch"
      v-model:search-type="searchType"
      v-model:search-text="searchText"
      :grid-info="gridInfo"
      @search="handleSearch"
      @reset="handleSearch"
    />
    <div class="filter-wraper">
      <table-operate is-in-template :btns="toolbarBtns" :show-back="showBack">
        <template v-if="showBack" #back="{size}">
          <span class="btn-wraper">
            <el-button type="primary" :size="size" @click="goBack">
            <el-icon><Back /></el-icon>
            返回
          </el-button>
          </span>
        </template>
      </table-operate>
    </div>
    <div style="margin-bottom:8px;"><el-button type="primary" @click="handleExportTable">全部导出</el-button></div>
    <standard-chart :chartType="chartType" :chart-data="tableData" :chart-info="tableInfo" />
    <lb-table
      v-loading="listLoading"
      v-bind="tableAttr"
      :column="tableColumns"
      :data="tableData"
      :table-info="tableInfo"
      :grid-info="gridInfo"
      :personalization="personalization"
      :btns="tableBtns"
      :pagination="enablePaging"
      background
      border
      is-template
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="pageSizes"
      v-model:current-page="currentPage"
      :total="total"
      :page-size="pageSize"
      :fixed-heigth="!enableChart"
      :default-sort="defaultSort"
      @size-change="handleSizeChange"
      @p-current-change="handleCurrentChange"
      @sort-change="handleSortChange"
    />
    <page-banner v-if="showBanner && bannerPosition==='bottom'" ref="pageBanner" :banner-setting="bannerSetting" />
    <common-dialog
      ref="commonDialog"
      width="1200px"
      v-model:dialog-visible="dialogVisible"
      title="报表统计"
    >
      <lb-table
        v-if="dialogVisible"
        v-loading="listLoadingDia"
        :column="tableColumnDia"
        :data="tableDataDia"
        :table-info="tableInfoDia"
        pagination
        background
        is-template
        fixed-heigth
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="pageSizes"
        v-model:current-page="currentPageDia"
        :total="totalDia"
        :page-size="pageSizeDia"
        @size-change="handleSizeDiaChange"
        @p-current-change="handleCurrentDiaChange"
      />
      <template #footer-default></template>
    </common-dialog>
  </div>
</template>

<script>
import main from './mixins/main'
import table from './mixins/table'
import filter from './mixins/filter'
import banner from './mixins/banner'
import baseForm from '@admin/packages/table-operate/src/baseForm'
import {
  DefaultBar
} from '@admin/packages/standard-chart/index.js'
import StandardChart from '@admin/packages/standard-chart/main.vue'
import {
  getStatisticInfoData,
  getMacro
} from '@admin/api/common'
import {
  createTableColumn,
  createTableData
} from './utils/table'
export default {
  name: 'Tem1160',
  components: {
    DefaultBar,
    StandardChart
  },
  extends: baseForm,
  mixins: [main, filter, table, banner],
  data() {
    return {
      dialogVisible: false,
      // 通用table
      tableColumnDia: [], // 表格列
      tableInfoDia: {}, // 后台返回的表信息
      tableDataDia: [], // 表数据
      listLoadingDia: false,
      currentPageDia: 1,
      pageSizeDia: 10,
      totalDia: 0,
      scope: null
    }
  },
  computed: {
    tableColumns: function() {
      console.log(this.tableColumn)
      return this.tableColumn.map(item => {
        const render = item.render
        item.render = (h, scope) => {
          const { property } = scope.column
          if (property.indexOf('c_') === 0) {
            return <el-button onClick={() => { this.columnClick(scope) }} type='text'>{render(h, scope)}</el-button>
          } else {
            return render(h, scope)
          }
        }
        return item
      })
    },
    enableChart: function() {
      return true
    },
    chartType: function(){
      let customParam = this.pageInfo.customParam
      if(customParam){
        customParam = JSON.parse(customParam)
        return customParam.chartType || 'bar'
      }else{
        return 'bar'
      }
    }
  },
  mounted: function() {
    this.getList()
  },
  methods: {
    onActivated: function() {
      this.getList()
    },
    handleSizeDiaChange(val) {
      this.currentPageDia = 1
      this.pageSizeDia = val
      this.getDialogList()
    },
    handleCurrentDiaChange() {
      this.getDialogList()
    },
    // 导出
    handleExportTable() {
      // 全部导出
      let params = this.getRequestParams()
      const macro = getMacro()
      params = Object.assign(macro, params)
      console.log(params)
      this.$download('/export/statisticInfoData', params)
    },
    getDialogList() {
      const { row, column } = this.scope
      const { property } = column
      let rowValue = row.row_value
      let colValue = property.substr(2)
      colValue = colValue === 'sum' ? '' : colValue
      rowValue = rowValue === 'r_sum' ? '' : rowValue
      const queryParam = JSON.parse(this.getRequestParams()?.queryParam)
      queryParam.PageIndex = this.currentPageDia
      queryParam.PageSize = this.pageSizeDia
      const params = {
        rowValue,
        colValue,
        pageId: window.$CD.pageId,
        queryParam: JSON.stringify(queryParam)
      }
      this.listLoadingDia = true
      getStatisticInfoData(params).then(res => {
        const {
          tableInfo,
          data,
          totalCount
        } = res.data
        this.tableInfoDia = tableInfo
        this.tableColumnDia = createTableColumn(tableInfo)
        this.tableDataDia = createTableData(data)
        this.totalDia = totalCount
        this.dialogVisible = true
      }).finally(() => {
        this.listLoadingDia = false
      })
    },
    columnClick(scope) {
      // 还原
      this.currentPageDia = 1
      this.pageSizeDia = 10
      this.scope = scope
      this.getDialogList()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .form-operate{
  display: inline-block;
  margin-right: 10px;
}
</style>
